<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib prefix="jwr"  uri="http://jawr.net/tags-el" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

<div id="tabContent" style="min-height: 500px;">

	<input type="hidden" id="mode" value="${mode}" />
		<div style="padding: 10px 0px 20px 0px;">
			<div id="btnReturnToOfferList" style="text-align: right;float: right;">
				<input class="btnClass" onclick="returnToOfferList();"
				     id="btnReturnToOfferList" name="btnReturnToOfferList" type="button" value="Return to Offer List"/>
			</div>
			<div class="font-header"><fmt:message key="location.setup.offer.${mode}.title"></fmt:message></div>
			<div style="clear: both;"></div>
		</div>
		<div class="instruction-sub-text" style="margin: 5px 0px">
			<fmt:message key="location.setup.offer.${mode}.label"></fmt:message>
		</div>
		
		<div style="float: left;">
			<div>
				<div class="arrow-bullet" style="float: left;margin-top: 8px;">&nbsp;</div>
				<div style="float: left;width: 105px;">Add a Offer</div>
				<div style="width: 668px;border-bottom: 1px solid #55648f;margin-top:-10px;float: left;">&nbsp;</div>
			</div>			
		</div>
		
	<form:form modelAttribute="offer" id="offerForm" name="offerForm" action="offer/save">
		<form:hidden path="id"/>
		<div class="gray-form-background" style="margin: 0px 0px; height: 100%; clear: both;">
				<div id="catgeoryNameDiv">
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						Offer Name *:</div>
					<div
						style="margin-top: 4px; margin-left: 10px; width: 240px; float: left;">
						
						<span class="font-form-field-detail"></span><br>
						<div class="form-fieldtop">
							<div class="form-fieldb1"></div>
							<div class="form-fieldb2"></div>
						</div>
						<div class="form-fieldcontent">
							
							<form:input path="name" maxlength="50" style="width: 233px;" 
								cssClass="required" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateOffer')"/>
						</div>
						<div class="form-fieldtop">
							<div class="form-fieldb2"></div>
							<div class="form-fieldb1"></div>
						</div>
						<div id="advice-required-name" class="x-icon" style="display: none;position: static;">Offer name is required.</div>						
					</div>
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						Start Date *:</div>
					<div style="margin-top: 4px; margin-left: 10px; width: 220px; float: left;">
						<div style="width: 120px;">
							<span class="font-form-field-detail">DD/MM/YYYY</span><br>
							<div class="form-fieldtop">
								<div class="form-fieldb1"></div>
								<div class="form-fieldb2"></div>
							</div>
							<div class="form-fieldcontent" style="height:23px; clear: both;">
								<div style="float: left;">
								<form:input path="startDate" maxlength="35" cssStyle="width: 90px;height: 20px;margin: 1px 0px 1px 3px;" 
									cssClass="required validate-date-dd/MM/yyyy" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateOffer')"
									 value="${offer.displayStartDate}" />
								</div>
								<div style="float: left;">
				                  		<input id="showStartDate" title="Show Calendar" class="calendar-icon"  value="" type="button"/>
				                 </div>
							     <div style="clear: both;"></div>		
							</div>
							<div class="form-fieldtop">
								<div class="form-fieldb2"></div>
								<div class="form-fieldb1"></div>
							</div>
							
						</div>
						<div id="advice-required-startDate" class="x-icon" style="display: none;position: static;">Start Date is required.</div>	
							<div id="advice-validate-date-dd/MM/yyyy-startDate" class="x-icon" style="display: none;position: static;">Invalid Date.</div>					
					</div>
					<div style="clear: both;height: 7px;">&nbsp;</div>
				</div>
				
				<div style="clear: both;height: 7px;">&nbsp;</div>
				<div id="catgeoryNameDiv">
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						Description *:</div>
				
					<div style="margin-top: 4px; margin-left: 10px; width: 240px; float: left;">
						<span class="font-form-field-detail"></span><br>
						<div class="form-fieldtop">
							<div class="form-fieldb1"></div>
							<div class="form-fieldb2"></div>
						</div>
						<div class="form-fieldcontent" >
							<form:textarea path="description" 
								cssStyle="width: 233px;max-width:233px;min-width:233px;min-height:200px;max-height:200"  maxlength="255"
								cssClass="required validate-description noexpand-textarea" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateOffer')"/>
						</div>
						<div class="form-fieldtop">
							<div class="form-fieldb2"></div>
							<div class="form-fieldb1"></div>
						</div>
						<div id="advice-required-description" class="x-icon" style="display: none; position: static;">Please enter Catgeory description.</div>		
					</div>
					
					
					<div class="font-form-field-detail"
						style="float: left; text-align: right; padding-top: 20px; line-height: 40px; width: 110px; vertical-align: middle;">
						End Date *:</div>
					<div style="margin-top: 4px; margin-left: 10px; width: 220px; float: left;">
						<div style="width: 120px;">	
							<span class="font-form-field-detail">DD/MM/YYYY</span><br>
							<div class="form-fieldtop">
								<div class="form-fieldb1"></div>
								<div class="form-fieldb2"></div>
							</div>
							<div class="form-fieldcontent" style="height:23px; clear: both;">
								<div style="float: left;">
									<form:input path="endDate" maxlength="35" cssStyle="width: 90px;height: 20px;margin: 1px 0px 1px 3px;" 
										cssClass="required validate-date-dd/MM/yyyy" onkeypress="javascript:return formFireDefaultButton(event, 'btnUpdateOffer')"
										value="${offer.displayEndDate}"/>
								</div>
								 <div style="float: left;">
								      	<input id="showEndDate" title="Show Calendar" class="calendar-icon"  value="" type="button"/>
								 </div>
								 <div style="clear: both;"></div>
							</div>
							<div class="form-fieldtop">
								<div class="form-fieldb2"></div>
								<div class="form-fieldb1"></div>
							</div>
												
						</div>
						<div id="advice-required-endDate" class="x-icon" style="display: none;position: static;">End date is required.</div>	
						<div id="advice-validate-date-dd/MM/yyyy-endDate" class="x-icon" style="display: none;position: static;">Invalid Date.</div>
					</div>
					<div style="clear: both;height: 7px;">&nbsp;</div>
				</div>		
			</div>
			<div id="calendarDialogContainerDate-startDate" class="yui-skin-default multi-calendar" style="z-index:99999; display:none;">
				<div class="hd" style="text-align: center">
					<b class="popup-top"><b class="popup-bottom-b0"></b><b class="popup-top-b1"></b><b class="popup-top-b2"></b><b class="popup-top-b3">
					</b><b class="popup-top-b4"></b><b class="popup-top-b5"></b><b class="popup-top-b6"></b><b class="popup-top-b7"></b><b class="popup-top-b8"></b>
					</b>
					<div id="headerIdcontainer-startDate" class="popup-header">Select Date<span class="fancy-arrow-icon"></span></div>
				</div>
	        	<div class="bd" id="calbdDate-startDate" style="height: 252px;">
	           		<div id="calcontrolDate-startDate" ></div>
	                <div style="clear:both"></div>
	                <div id="navDate-startDate" style="text-align: center; display:none; background-color:transparent;white-space: nowrap; padding-bottom: 5px;">
						<a id="prevmonthDate-startDate" class="double-arrow-left cal-arrow-previous">&nbsp;</a>
		         		<a id="closeDate-startDate" class="button-cancel-text" style="text-align: center;">Cancel</a>
		            	<a id="nextmonthDate-startDate" class="double-arrow-right cal-arrow-next">&nbsp;</a>
			 		</div>
	            </div>	                  	
				<div class="ft" style="z-index: 16000;">
					<b class="popup-bottom"><b class="popup-bottom-b8"></b><b class="popup-bottom-b7"></b><b class="popup-bottom-b6">
					</b><b class="popup-bottom-b5"></b><b class="popup-bottom-b4"></b><b class="popup-bottom-b3"></b><b class="popup-bottom-b2"></b><b class="popup-bottom-b1"></b><b class="popup-bottom-b0"></b>
					</b>
				</div>
			</div>
			<div id="calendarDialogContainerDate-endDate" class="yui-skin-default multi-calendar" style="z-index:99999; display:none;">
					<div class="hd" style="text-align: center">
						<b class="popup-top"><b class="popup-bottom-b0"></b><b class="popup-top-b1"></b><b class="popup-top-b2"></b><b class="popup-top-b3">
						</b><b class="popup-top-b4"></b><b class="popup-top-b5"></b><b class="popup-top-b6"></b><b class="popup-top-b7"></b><b class="popup-top-b8"></b>
						</b>
						<div id="headerIdcontainerDate-endDate" class="popup-header">Select Date<span class="fancy-arrow-icon"></span></div>
					</div>
		        	<div class="bd" id="calbdDate-endDate" style="height: 252px;">
		           		<div id="calcontrolDate-endDate" ></div>
		                <div style="clear:both"></div>
		                <div id="navDate-endDate" style="text-align: center; display:none; background-color:transparent;white-space: nowrap; padding-bottom: 5px;">
							<a id="prevmonthDate-endDate" class="double-arrow-left cal-arrow-previous">&nbsp;</a>
			         		<a id="closeDate-endDate" class="button-cancel-text" style="text-align: center;">Cancel</a>
			            	<a id="nextmonthDate-endDate" class="double-arrow-right cal-arrow-next">&nbsp;</a>
				 		</div>
		            </div>	                  	
					<div class="ft" style="z-index: 16000;">
						<b class="popup-bottom"><b class="popup-bottom-b8"></b><b class="popup-bottom-b7"></b><b class="popup-bottom-b6">
						</b><b class="popup-bottom-b5"></b><b class="popup-bottom-b4"></b><b class="popup-bottom-b3"></b><b class="popup-bottom-b2"></b><b class="popup-bottom-b1"></b><b class="popup-bottom-b0"></b>
						</b>
					</div>
			</div>
			<div style="float: right;padding-right: 20px;padding-top: 20px;">
			<input id="btnCancelOffer" name="btnCancelOffer"  class="button-text" 
					value="Cancel" onclick="returnToOfferList();" type="button" />
				<input class="btnClass" id="btnUpdateOffer" name="btnUpdateOffer" type="button" value="Submit"/>
			</div>
	</form:form>
	
	
</div>

<script type="text/javascript">
	dojo.connect(eleById("btnUpdateOffer"), "onclick", null, function(){
			var menuFormValidator = new Validation('offerForm', {onSubmit : true});
			menuFormValidator.reset();					
			var isValid = menuFormValidator.validate();
			if(isValid){
				Spring.remoting.submitForm('btnUpdateOffer', 'offerForm'); 
				return true;
			}
			return false;
	});
	
	YAHOO.util.Event.onDOMReady(function(){
		initCalendar('showStartDate','startDate');
		initCalendar('showEndDate','endDate');
	});
</script>